<template>
	<view class="content">
		<scroll-view @scrolltolower="lower" :style="{height:data.clientHeight+'px'}" id="scrollT" scroll-y="true">
			<view class="follow-item" v-for="(item,index) in data.list" :key="index">
				<view class="item-head flex-justify-s">
					<view class="flex-align-center">
						<img class="head-img" :src="item.logo" alt="">
						<view class="fl-box flex-center-a">
							<text class="title">{{item.name}}</text>
							<text class="time">{{item.createTime}}</text>
						</view>
					</view>
					<img class="share" src="../../../static/img/img/share.png" alt="">
				</view>
				<clubItem :item="item.gameInfoWXResponse"></clubItem>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		onMounted,
		defineProps,
		defineExpose
	} from "vue";
	import {
		setScrollHeight
	} from '@/utils/uitls.js';
	import clubItem from "@/compoments/discover/clubItem.vue";
	import {
		getConcernList
	} from "../../requestApi/api.js";
	const props=defineProps(['city']);
	const instance = getCurrentInstance(); //获取当前实例
	const data = ref({
		clientHeight: 0, //scroll-view 可滚动高度
		current: 1,
		size: 10,
		address:'',
		isLoading: false,
		isComplete: false,
		list: [],
	})
	onMounted(() => {
		setScrollHeight("#scrollT", instance).then(res => {
			data.value.clientHeight = res;
		});
		data.value.address=props.city
		getList();
	});
	//切换城市
	const changeCity=()=>{
		data.value.list = [];
		data.value.current=1;
		data.value.isComplete = false;
		getList();
	};
	defineExpose({data,changeCity})
	//触底
	const lower = () => {
		!data.value.isLoading && !data.value.isComplete && getList();
		// console.log('到底啦')
	}
	const getList = () => {
		data.value.isLoading = true;
		getConcernList({
			current: data.value.current,
			size: data.value.size,
			address:data.value.address
		}).then(res => {
			data.value.isLoading = false;
			data.value.list = data.value.list.concat(res.data.records);
			data.value.current++;
			data.value.isComplete = !res.data.records.length;
		})
	};
</script>

<style lang="scss">
	.content {
		padding-top: 16rpx;
	}

	.item-head {
		padding: 0 40rpx;
		margin-bottom: 22rpx;

		.head-img {
			width: 76rpx;
			height: 76rpx;
			border: 4rpx solid #fff;
			border-radius: 50%;
			margin-right: 16rpx;
		}

		.fl-box {
			height: 80rpx;

			.title {
				font-size: 32rpx;
				color: #2C2C2C;
				font-weight: bold;
			}

			.time {
				font-size: 24rpx;
				color: #2C2C2C;
			}
		}



		.share {
			width: 36rpx;
			height: 36rpx;
		}
	}
</style>